<template>
  <div>
    <h1>List</h1>
    <ul>
      <li v-for="(i, index) in 10" :key="i">
        <router-link :to="'/detail/'+index">{{i}}</router-link>
      </li>
    </ul>
    <ul>
      <li v-for="(i, index) in list" :key="i">
        <button @click="goDetail(i)">{{i}}</button>
      </li>
    </ul>
    <ul>
      <li v-for="(i, index) in list" :key="i">
        <router-link :to="{ name: 'Detail', params: { id: index, title: i }}">{{i}}</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        "新型 PC 勒索病毒“WannaRen”开始传播：大部分杀毒软件无法拦截",
        "麦当劳 39 元半价桶火爆致微信小程序崩溃，线上崩完线下排长队",
        "雷军晒小米公司第一间办公室：400 平方米、门口两个大字",
        "荣耀30系列重磅特性曝光：首发麒麟985，上90Hz高刷屏",
        "海外再不全民戴口罩，这 1.9 万家新增口罩业务公司要哭了",
        "小米十周年雷军发长文：曾敢说出“要做最好的手机，卖一半的价钱”",
        "爆料图显示苹果“iPhone 12 Pro”配备LiDAR扫描仪",
        "魅族 Flyme 夜间模式重大改变，后续将升级兼容原生的深色模式",
        "米家电动剃须刀S300发布：Type-C充电，99元",
        "小米 Redmi K30 Pro 变焦版 12GB+512GB 官宣：4499 元，明日 0 点开售",
        "焕发第二春，它是 MOTO 真正意义上的「里程碑」",
        "荣耀30 Pro跑分曝光：搭载麒麟990 5G SoC"
      ]
    };
  },
  mounted() {
    // console.log("List", this.$route);
  },
  methods: {
    goDetail(i) {
      this.$router.push({
        name: "Detail",
        params: {
          title: i
        }
      });
    }
  }
};
</script>

<style>
</style>